<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>@import | Sass中文文档</title>
    <meta name="description" content="Sass是世界上最成熟、稳定、强大的专业级CSS扩展语言">
    <meta name="keywords" content="Sass,Sass教程,Sass中国,Sass中文,Sass文档,SCSS,SCSS教程,SCSS中国,SCSS中文,SCSS文档,CSS预处理">
  <link rel="icon" href="/sass-cn/images/favicon.ico" preload="true" as="image">
    
    <link rel="preload" href="/sass-cn/assets/css/0.styles.2d6686da.css" as="style"><link rel="preload" href="/sass-cn/assets/js/app.deb571aa.js" as="script"><link rel="preload" href="/sass-cn/assets/js/layout-layout.f021cffe.js" as="script"><link rel="preload" href="/sass-cn/assets/js/vendors~layout-layout.096dd481.js" as="script"><link rel="preload" href="/sass-cn/assets/js/page-api-atrules-import.1caa72ed.js" as="script"><link rel="preload" href="/sass-cn/assets/js/87.34d80629.js" as="script"><link rel="preload" href="/sass-cn/assets/js/93.6bc9799b.js" as="script"><link rel="prefetch" href="/sass-cn/assets/js/86.f407d520.js"><link rel="prefetch" href="/sass-cn/assets/js/88.7da6d807.js"><link rel="prefetch" href="/sass-cn/assets/js/89.c6220562.js"><link rel="prefetch" href="/sass-cn/assets/js/90.9b5a2114.js"><link rel="prefetch" href="/sass-cn/assets/js/91.bd6167c2.js"><link rel="prefetch" href="/sass-cn/assets/js/92.339ec357.js"><link rel="prefetch" href="/sass-cn/assets/js/94.322094fc.js"><link rel="prefetch" href="/sass-cn/assets/js/95.376dbcc7.js"><link rel="prefetch" href="/sass-cn/assets/js/96.ab69b324.js"><link rel="prefetch" href="/sass-cn/assets/js/layout-notfound.626e4f7c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-atroot.32ef08ae.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-debug.06148e5a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-error.29586dbb.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-extend.cb5a5d75.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-each.4393ee83.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-for.cb8126b0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-ifandelse.bc133ead.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-readme.208a4bd0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-while.b671cb7c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-formcss.6b9bf244.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-forward.84e92434.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-function.92dd9149.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-mixinandinclude.317a55a5.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-readme.488e2ba3.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-use.389e0385.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-warn.2f405d31.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-compoundselectors.a819b0fe.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-readme.bd231221.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-variablesyntax.5a5f2d19.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-dart.48bed8a2.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-readme.07ce98e9.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-ruby.8eaf4b85.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-colors.0e3e5304.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-introspection.ada8df60.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-lists.a4895d0e.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-maps.45a902b5.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-numbers.c8f4b6cc.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-plain.fef59f4c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-readme.541e96b9.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-selectors.38c993bc.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-strings.175e953b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-interpolation.c1b3ae69.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-jsapi.a56000a6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-color.8963ea84.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-list.10a115ab.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-map.e0491724.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-math.0fa1c600.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-meta.0db00faa.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-readme.725f2037.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-selector.277cf2d4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-string.f885bb86.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-boolean.8989e7df.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-equality.f9f7f23a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-numeric.99a7bdba.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-readme.652142ed.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-relational.0d200de4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-string.856849c0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-readme.4d32e79b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-parentselector.ec3b0a60.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-placeholderselectors.02d3d2d8.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-propertydeclarations.c36f8cc8.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-readme.0e7410e6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-comments.96ee19bd.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-functions.ea6a9af7.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-parsing.b904a6f4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-readme.73283f3d.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-structure.3ae5c00a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-booleans.fe9e9754.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-colors.e2ba3180.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-functions.3c5f60ca.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-lists.c9668494.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-maps.e77a0fb7.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-null.93ac8da1.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-numbers.3976f2f1.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-readme.94af6f11.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-strings.2570f03f.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-variables.2b768950.js"><link rel="prefetch" href="/sass-cn/assets/js/page-code.04c89951.js"><link rel="prefetch" href="/sass-cn/assets/js/page-contact.31a84f81.js"><link rel="prefetch" href="/sass-cn/assets/js/page-install-readme.48b75800.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-extend.93e31b0d.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-import.d9dfee8b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-mixins.bb4b5fc6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-nesting.1fcb2b18.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-operators.b089064a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-partials.516dba99.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-preprocessing.8a2f2124.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-readme.2a880d8a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-variables.cc64042a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-readme.6924f94e.js">
    <link rel="stylesheet" href="/sass-cn/assets/css/0.styles.2d6686da.css">
    <meta name="baidu-site-verification" content="HISWYjeJhP">
    <meta name="google-site-verification" content="o-XFzkWKa1fqZMPS6L8cuu7-UCoqTSWKhk-tZAdIW9E">
    <script>var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0e27eeb01c53bbd49dcc535da62d57ac"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s) })();</script>
</head>

<body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/sass-cn/" class="home-link router-link-active"><!----> <span class="site-name">Sass中文文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/sass-cn/install/" class="nav-link">安装</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">学习指南</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Preprocessing.html" class="nav-link">预处理</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Nesting.html" class="nav-link">嵌套规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Partials.html" class="nav-link">片段文件</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Import.html" class="nav-link">文件导入</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Mixins.html" class="nav-link">混合器</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Extend.html" class="nav-link">扩展和继承</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Operators.html" class="nav-link">操作符</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/api/Syntax/" class="nav-link">语法</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/StyleRules/" class="nav-link">样式规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Interpolation.html" class="nav-link">插值</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/AtRules/" class="nav-link router-link-active">AtRules</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Values/" class="nav-link">值类型</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Operators/" class="nav-link">操作符</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Modules/" class="nav-link">内置模块</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/BreakChanges/" class="nav-link">重大改变</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/CommandLine/" class="nav-link">命令行</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/JsApi/" class="nav-link">JavaScript API</a></li></ul></div></div><div class="nav-item"><a href="https://sass-lang.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  英文官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="/sass-cn/Contact.html" class="nav-link">Contact</a></div> <a href="https://github.com/zongyang/sass-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    源码
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/sass-cn/install/" class="nav-link">安装</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">学习指南</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Preprocessing.html" class="nav-link">预处理</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Nesting.html" class="nav-link">嵌套规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Partials.html" class="nav-link">片段文件</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Import.html" class="nav-link">文件导入</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Mixins.html" class="nav-link">混合器</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Extend.html" class="nav-link">扩展和继承</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Operators.html" class="nav-link">操作符</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/api/Syntax/" class="nav-link">语法</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/StyleRules/" class="nav-link">样式规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Interpolation.html" class="nav-link">插值</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/AtRules/" class="nav-link router-link-active">AtRules</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Values/" class="nav-link">值类型</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Operators/" class="nav-link">操作符</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Modules/" class="nav-link">内置模块</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/BreakChanges/" class="nav-link">重大改变</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/CommandLine/" class="nav-link">命令行</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/JsApi/" class="nav-link">JavaScript API</a></li></ul></div></div><div class="nav-item"><a href="https://sass-lang.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  英文官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="/sass-cn/Contact.html" class="nav-link">Contact</a></div> <a href="https://github.com/zongyang/sass-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    源码
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <div style="padding:1rem 0;"><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins data-ad-client="ca-pub-6227283216337087" data-ad-slot="1743359721" class="adsbygoogle" style="display:inline-block;width:260px;height:120px"></ins> <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></div> <ul class="sidebar-links"><li><a href="/sass-cn/install/" class="sidebar-link">安装</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>学习指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/learn/" class="sidebar-link">基础知识</a></li><li><a href="/sass-cn/learn/Preprocessing.html" class="sidebar-link">预处理</a></li><li><a href="/sass-cn/learn/Variables.html" class="sidebar-link">变量</a></li><li><a href="/sass-cn/learn/Nesting.html" class="sidebar-link">嵌套规则</a></li><li><a href="/sass-cn/learn/Partials.html" class="sidebar-link">片段文件</a></li><li><a href="/sass-cn/learn/Import.html" class="sidebar-link">文件导入</a></li><li><a href="/sass-cn/learn/Mixins.html" class="sidebar-link">混合器</a></li><li><a href="/sass-cn/learn/Extend.html" class="sidebar-link">扩展与继承</a></li><li><a href="/sass-cn/learn/Operators.html" class="sidebar-link">操作符</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>文档</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/api/" class="sidebar-link">综述</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>语法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>样式规则</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/sass-cn/api/Variables.html" class="sidebar-link">变量</a></li><li><a href="/sass-cn/api/Interpolation.html" class="sidebar-link">插值</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>@规则</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/api/AtRules/" class="sidebar-link">综述</a></li><li><a href="/sass-cn/api/AtRules/Import.html" class="active sidebar-link">@import</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/sass-cn/api/AtRules/Import.html#文件查找" class="sidebar-link">文件查找</a></li><li class="sidebar-sub-header"><a href="/sass-cn/api/AtRules/Import.html#嵌套" class="sidebar-link">嵌套</a></li><li class="sidebar-sub-header"><a href="/sass-cn/api/AtRules/Import.html#导入css" class="sidebar-link">导入CSS</a></li><li class="sidebar-sub-header"><a href="/sass-cn/api/AtRules/Import.html#原生css-imports" class="sidebar-link">原生CSS @imports</a></li></ul></li><li><a href="/sass-cn/api/AtRules/MixinAndinclude.html" class="sidebar-link">@mixin、@include</a></li><li><a href="/sass-cn/api/AtRules/Function.html" class="sidebar-link">@function</a></li><li><a href="/sass-cn/api/AtRules/Extend.html" class="sidebar-link">@extend</a></li><li><a href="/sass-cn/api/AtRules/Error.html" class="sidebar-link">@error</a></li><li><a href="/sass-cn/api/AtRules/Warn.html" class="sidebar-link">@warn</a></li><li><a href="/sass-cn/api/AtRules/Debug.html" class="sidebar-link">@debug</a></li><li><a href="/sass-cn/api/AtRules/AtRoot.html" class="sidebar-link">@at-root</a></li><li><section class="sidebar-group collapsable is-sub-group depth-2"><p class="sidebar-heading"><span>流程控制</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/sass-cn/api/AtRules/FormCss.html" class="sidebar-link">CSS 原生@规则</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>值类型</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>操作符</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>内置模块</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>重大改变</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>命令行</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/sass-cn/api/JsApi.html" class="sidebar-link">JavaScript API</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="import"><a href="#import" aria-hidden="true" class="header-anchor">#</a> @import</h1> <div><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins data-ad-client="ca-pub-6227283216337087" data-ad-slot="9720145993" class="adsbygoogle" style="display:inline-block;width:600px;height:90px"></ins> <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></div> <p>Sass扩展了<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@import" target="_blank" rel="noopener noreferrer">CSS @import<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，能够导入Sass和CSS样式表，将多个样式表的CSS组合在一起，并提供对<a href="/sass-cn/api/AtRules/MixinAndinclude.html">mixin</a>、<a href="/sass-cn/api/AtRules/Function.html">函数</a>和<a href="/sass-cn/api/Variables.html">变量</a>的支持。原生CSS导入要求浏览器在呈现页面时发出多个HTTP请求，而Sass导入则完全在编译期间处理。</p> <p>Sass导入与CSS导入具有相同的语法，只是它们允许用逗号分隔多个导入，而不是要求每个导入都有自己的<code>@import</code>。此外，在<a href="/sass-cn/api/Syntax/#缩进的语法">缩进语法</a>中，导入的URL不需要有引号。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// foundation/_code.scss</span>
<span class="token selector">code </span><span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> .25em<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// foundation/_lists.scss</span>
<span class="token selector">ul, ol </span><span class="token punctuation">{</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>

  <span class="token selector"><span class="token parent important">&amp;</span> <span class="token parent important">&amp;</span> </span><span class="token punctuation">{</span>
    <span class="token selector">padding: </span><span class="token punctuation">{</span>
      <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// style.scss</span>
<span class="token keyword">@import</span> <span class="token string">'foundation/code'</span><span class="token punctuation">,</span> <span class="token string">'foundation/lists'</span><span class="token punctuation">;</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// foundation/_code.sass</span>
<span class="token selector">code</span>
<span class="token property-line">  <span class="token property">padding</span><span class="token punctuation">:</span> .25em</span>
<span class="token property-line">  <span class="token property">line-height</span><span class="token punctuation">:</span> 0</span>
</code></pre></div><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// foundation/_lists.sass</span>
<span class="token selector">ul, ol</span>
<span class="token property-line">  <span class="token property">text-align</span><span class="token punctuation">:</span> left</span>

  <span class="token selector">&amp; &amp;</span>
<span class="token property-line">    <span class="token property">padding</span><span class="token punctuation">:</span></span>
<span class="token property-line">      <span class="token property">bottom</span><span class="token punctuation">:</span> 0</span>
<span class="token property-line">      <span class="token property">left</span><span class="token punctuation">:</span> 0</span>
</code></pre></div><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// style.sass</span>
<span class="token atrule-line"><span class="token atrule">@import</span> foundation/code, foundation/lists</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">code</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> .25em<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">ul, ol</span> <span class="token punctuation">{</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">ul ul, ol ol</span> <span class="token punctuation">{</span>
  <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div></div> <p>当Sass导入一个文件时，文件的内容将会被放到<code>@import</code>出现的位置。导入文件以及<code>@import</code>之前定义的的任何<a href="/sass-cn/api/AtRules/MixinAndinclude.html">mixin</a>、<a href="/sass-cn/api/AtRules/Function.html">函数</a>和<a href="/sass-cn/api/Variables.html">变量</a>都是可用的。</p> <div class="warning custom-block"><p>如果同一个样式表被多次导入，那么它会被计算相应的次数。如果它只定义函数和mixin，这通常没什么问题，但是如果它包含样式规则，它们将不止一次地编译为CSS。</p></div> <h2 id="文件查找"><a href="#文件查找" aria-hidden="true" class="header-anchor">#</a> 文件查找</h2> <p>在导入文件时使用文件的绝对地址是非常不方便的，Sass的查找算法使得要导入文件变得很方便。对于初学者，您不必显式地写出要导入的文件的扩展名 <code>@import &quot;variables&quot;</code>将自动加载<code>variables.scss</code>、<code>variables.sass</code>或者<code>variables.css</code>。</p> <div class="warning custom-block"><p>为了确保样式表在每个操作系统上都能工作，Sass根据<strong>URL</strong>而不是<strong>文件路径</strong>导入文件。这意味着即使在Windows上，也需要使用前斜杠，而不是后斜杠。</p></div> <h3 id="加载路径"><a href="#加载路径" aria-hidden="true" class="header-anchor">#</a> 加载路径</h3> <p>Sass允许用户提供<strong>加载路径</strong>：Sass在解析导入时将查看的文件系统上的路径。 例如，如果将<code>node_modules/susy/sass</code>作为加载路径传递，则可以使用<code>@import &quot;susy&quot;</code>则加载<code>node_modules/susy/sass/susy.scss</code>。</p> <p>不过，导入总是先解析当前文件的相对路径。 仅当与当前文件相对路径不匹配时，才会使用加载路径。这可确保您在添加新库时不会意外地弄乱相对导入。</p> <div class="tip custom-block"><p>与其他一些语言不同，Sass不要求您使用<code>./</code>表示相对路径。相对导入总是可用的。</p></div> <h3 id="片段文件"><a href="#片段文件" aria-hidden="true" class="header-anchor">#</a> 片段文件</h3> <p>有这样一个约定，以<code>_</code>开头的Sass文件本身不会被编译，而是单纯的作为被导入文件。这些被称为<code>片段文件</code>，它们告诉Sass工具不要试图编译这些文件。在导入片段文件时可以省略<code>_</code>。</p> <h3 id="文件索引"><a href="#文件索引" aria-hidden="true" class="header-anchor">#</a> 文件索引</h3> <p>兼容性：Dart Sass ✓<span class="sa-ver-divider">|</span>LibSass <span class="badge tip" style="vertical-align:middle;" data-v-0f036736>3.6.0+</span><span class="sa-ver-divider">|</span>Ruby Sass <span class="badge tip" style="vertical-align:middle;" data-v-0f036736>3.6.0+</span></p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// foundation/_code.scss</span>
<span class="token selector">code </span><span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> .25em<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// foundation/_lists.scss</span>
<span class="token selector">ul, ol </span><span class="token punctuation">{</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>

  <span class="token selector"><span class="token parent important">&amp;</span> <span class="token parent important">&amp;</span> </span><span class="token punctuation">{</span>
    <span class="token selector">padding: </span><span class="token punctuation">{</span>
      <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// foundation/_index.scss</span>
<span class="token keyword">@import</span> <span class="token string">'code'</span><span class="token punctuation">,</span> <span class="token string">'lists'</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// style.scss</span>
<span class="token keyword">@import</span> <span class="token string">'foundation'</span><span class="token punctuation">;</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// foundation/_code.sass</span>
<span class="token selector">code</span>
<span class="token property-line">  <span class="token property">padding</span><span class="token punctuation">:</span> .25em</span>
<span class="token property-line">  <span class="token property">line-height</span><span class="token punctuation">:</span> 0</span>
</code></pre></div><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// foundation/_lists.sass</span>
<span class="token selector">ul, ol</span>
<span class="token property-line">  <span class="token property">text-align</span><span class="token punctuation">:</span> left</span>

  <span class="token selector">&amp; &amp;</span>
<span class="token property-line">    <span class="token property">padding</span><span class="token punctuation">:</span></span>
<span class="token property-line">      <span class="token property">bottom</span><span class="token punctuation">:</span> 0</span>
<span class="token property-line">      <span class="token property">left</span><span class="token punctuation">:</span> 0</span>
</code></pre></div><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// foundation/_index.sass</span>
<span class="token atrule-line"><span class="token atrule">@import</span> code, lists</span>
</code></pre></div><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// style.sass</span>
<span class="token atrule-line"><span class="token atrule">@import</span> foundation</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">code</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> .25em<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">ul, ol</span> <span class="token punctuation">{</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">ul ul, ol ol</span> <span class="token punctuation">{</span>
  <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div></div> <h3 id="自定义导入"><a href="#自定义导入" aria-hidden="true" class="header-anchor">#</a> 自定义导入</h3> <p>所有的Sass实现都提供了自定义导入器方法，控制着<code>@imports</code>如何导入本地样式表:</p> <ul><li><a href="https://npmjs.com/package/node-sass" target="_blank" rel="noopener noreferrer">Node Sass<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>和<a href="https://npmjs.com/package/sass" target="_blank" rel="noopener noreferrer">Dart Sass on npm<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>提供了一个<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">导入器选项</a>，作为其JS API的一部分。</li> <li><a href="https://pub.dartlang.org/packages/sass" target="_blank" rel="noopener noreferrer">Dart Sass on pub<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>提供了<a href="https://pub.dartlang.org/documentation/sass/latest/sass/Importer-class.html" target="_blank" rel="noopener noreferrer">Importer class<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，可以由自定义导入器扩展。</li> <li><a href="https://sass-lang.com/ruby-sass" target="_blank" rel="noopener noreferrer">Ruby Sass<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>提供了一个抽象类<a href="https://www.rubydoc.info/gems/sass/Sass/Importers/Base" target="_blank" rel="noopener noreferrer">Importers::Base<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，可由自定义导入器扩展。</li></ul> <h2 id="嵌套"><a href="#嵌套" aria-hidden="true" class="header-anchor">#</a> 嵌套</h2> <p>导入通常是在样式表的顶层编写的，但并不是必须的。它们也可以嵌套在<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">样式规则</a>或<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">原生的CSS @规则</a>中。导入的CSS处于当前代码块的上下文中，这使得将嵌套导入的CSS作用域指向特定的元素或媒体查询是非常有用的。注意，嵌套导入中定义的全局<a href="/sass-cn/api/AtRules/MixinAndinclude.html">mixin</a>、<a href="/sass-cn/api/AtRules/Function.html">函数</a>和<a href="/sass-cn/api/Variables.html">变量</a>仍然是全局。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// _theme.scss</span>
<span class="token selector">pre, code </span><span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Source Code Pro'</span><span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// style.scss</span>
<span class="token selector">.theme-sample </span><span class="token punctuation">{</span>
  <span class="token keyword">@import</span> <span class="token string">&quot;theme&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token selector">pre, code</span>
<span class="token property-line">  <span class="token property">font-family</span><span class="token punctuation">:</span> </span><span class="token string">'Source Code Pro'</span><span class="token selector">, Helvetica, Arial</span>
<span class="token property-line">  <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px</span>
</code></pre></div><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// style.sas</span>
<span class="token selector">.theme-sample</span>
<span class="token atrule-line">  <span class="token atrule">@import</span> theme</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.theme-sample pre, .theme-sample code</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Source Code Pro'</span><span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div></div> <div class="tip custom-block"><p>嵌套导入对于限定第三方样式表的作用域非常有用，但是如果您是要导入的样式表的作者，通常最好在<a href="/sass-cn/api/AtRules/MixinAndinclude.html">mixin</a>中编写样式，并在嵌套上下文中包含<code>mixin</code>。<code>mixin</code>可以以更灵活的方式使用，在查看导入的样式表时，更清楚地了解它的用途。</p></div> <div class="warning custom-block"><p>嵌套导入中的CSS像<code>mixin</code>一样计算，这意味着任何<a href="/sass-cn/api/AtRules/api/StyleRules/ParentSelector.html">父选择器</a>都将引用嵌套样式表的选择器。</p></div> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// _theme.scss</span>
<span class="token selector">ul li </span><span class="token punctuation">{</span>
  <span class="token property"><span class="token variable">$padding</span></span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token variable">$padding</span><span class="token punctuation">;</span>
  <span class="token selector">[dir=rtl] <span class="token parent important">&amp;</span> </span><span class="token punctuation">{</span>
    <span class="token selector">padding: </span><span class="token punctuation">{</span>
      <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">right</span><span class="token punctuation">:</span> <span class="token variable">$padding</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// style.scss</span>
<span class="token selector">.theme-sample </span><span class="token punctuation">{</span>
  <span class="token keyword">@import</span> <span class="token string">&quot;theme&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// _theme.sass</span>
<span class="token selector">ul li</span>
<span class="token variable-line">  <span class="token variable">$padding</span><span class="token punctuation">:</span> 16px</span>
<span class="token property-line">  <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token variable">$padding</span></span>
  <span class="token selector">[dir=rtl] &amp;</span>
<span class="token property-line">    <span class="token property">padding</span><span class="token punctuation">:</span></span>
<span class="token property-line">      <span class="token property">left</span><span class="token punctuation">:</span> 0</span>
<span class="token property-line">      <span class="token property">right</span><span class="token punctuation">:</span> <span class="token variable">$padding</span></span>
</code></pre></div><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// style.sass</span>
<span class="token selector">.theme-sample</span>
<span class="token atrule-line">  <span class="token atrule">@import</span> theme</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.theme-sample ul li</span> <span class="token punctuation">{</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">[dir=rtl] .theme-sample ul li</span> <span class="token punctuation">{</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding-right</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div></div> <h2 id="导入css"><a href="#导入css" aria-hidden="true" class="header-anchor">#</a> 导入CSS</h2> <p>兼容性：Dart Sass <span class="badge tip" style="vertical-align:middle;" data-v-0f036736>1.11.0+</span> <span class="sa-ver-divider">|</span>LibSass   <span class="badge warn" style="vertical-align:middle;" data-v-0f036736>部分支持</span> <span class="sa-ver-divider">|</span>Ruby Sass  ✗</p> <blockquote><p>LibSass支持使用扩展名<code>.CSS</code>导入文件，但与规范相反，它们被视为SCSS文件，而不是被解析为CSS。此行为已被弃用，正在进行更新以支持下面描述的行为。</p></blockquote> <p>除了导入<code>.sass</code>和<code>.scss</code>文件外zSass还可以导入普通的<code>.css</code>文件。惟一的规则是导入必须不显式地包含<code>.CSS</code>扩展，因为它用于表示一个<a href="/sass-cn/api/AtRules/Import.html#原生css-imports">原生的CSS @import</a>。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// code.css</span>
<span class="token selector">code </span><span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> .25em<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// style.scss</span>
<span class="token keyword">@import</span> <span class="token string">'code'</span><span class="token punctuation">;</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// code.css</span>
<span class="token selector">code {</span>
<span class="token property-line">  <span class="token property">padding</span><span class="token punctuation">:</span> .25em;</span>
<span class="token property-line">  <span class="token property">line-height</span><span class="token punctuation">:</span> 0;</span>
<span class="token selector">}</span>
</code></pre></div><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// style.sass</span>
<span class="token atrule-line"><span class="token atrule">@import</span> code</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">code</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> .25em<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div></div> <p>Sass导入的CSS文件不允许任何特殊的Sass特性。为了确保作者不会不小心在他们的CSS中编写Sass，所有不是有效CSS的Sass特性都会产生错误。否则，CSS将按原样呈现。Sass导入的CSS文件样式可以被<a href="/sass-cn/api/AtRules/Extend.html">继承</a>;</p> <h2 id="原生css-imports"><a href="#原生css-imports" aria-hidden="true" class="header-anchor">#</a> 原生CSS @imports</h2> <p>兼容性：Dart Sass ✓ <span class="sa-ver-divider">|</span>LibSass <span class="badge warn" style="vertical-align:middle;" data-v-0f036736>部分支持</span><span class="sa-ver-divider">|</span>Ruby Sass  ✓</p> <blockquote><p>默认情况下，LibSass能正确处理原生的CSS导入。然而，任何<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">自定义导入器</a>都错误地应用于原生CSS <code>@import</code>规则，从而使这些规则能够加载Sass文件 (表示不理解😂)。</p></blockquote> <p>因为<code>@import</code>在CSS中也有定义，所以Sass需要一种编译原生CSS<code>@import</code>的方法，以确保在编译时不会导入这些文件。为了实现这一点，并确保SCSS是CSS超集，Sass在编译以下<code>@import</code>时，视为原生CSS导入:</p> <ul><li>URL以<code>.css</code>结尾的。</li> <li>URL以<code>http://</code>或<code>https://</code>开头的。</li> <li>使用<code>url()</code>的。</li> <li>使用了媒体查询。</li></ul> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@import</span> <span class="token url">url</span><span class="token punctuation">(</span>theme.css<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">@import</span> <span class="token string">&quot;http://fonts.googleapis.com/css?family=Droid+Sans&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">@import</span> <span class="token url">url</span><span class="token punctuation">(</span>theme<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">@import</span> <span class="token string">&quot;landscape&quot;</span> screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@import</span> &quot;theme.css&quot;</span>
<span class="token atrule-line"><span class="token atrule">@import</span> &quot;http://fonts.googleapis.com/css?family<span class="token atrule">=</span>Droid<span class="token atrule">+</span>Sans&quot;</span>
<span class="token atrule-line"><span class="token atrule">@import</span> url(theme)</span>
<span class="token atrule-line"><span class="token atrule">@import</span> &quot;landscape&quot; screen and (orientation: landscape)</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@import</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>theme.css<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;http://fonts.googleapis.com/css?family=Droid+Sans&quot;</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>theme<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;landscape&quot;</span> screen and <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
</code></pre></div></div></div></div> <h3 id="插值"><a href="#插值" aria-hidden="true" class="header-anchor">#</a> 插值</h3> <p>尽管Sass导入不能使用<a href="/sass-cn/api/Interpolation.html">插值</a>（以确保总是能够知道<a href="/sass-cn/api/AtRules/MixinAndinclude.html">mixin</a>、<a href="/sass-cn/api/AtRules/Function.html">函数</a>和<a href="/sass-cn/api/Variables.html">变量</a>来自何处），但是原生CSS导入可以。这使得动态生成导入成为可能，例如基于mixin参数。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@mixin</span> <span class="token function">google-font</span><span class="token punctuation">(</span><span class="token variable">$family</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">@import</span> <span class="token url">url</span><span class="token punctuation">(</span><span class="token string">&quot;http://fonts.googleapis.com/css?family=#{$family}&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">@include</span> <span class="token function">google-font</span><span class="token punctuation">(</span><span class="token string">&quot;Droid Sans&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@mixin</span> google-font($family)</span>
<span class="token atrule-line">  <span class="token atrule">@import</span> url(&quot;http://fonts.googleapis.com/css?family<span class="token atrule">=</span>#{$family}&quot;)</span>

<span class="token atrule-line"><span class="token atrule">@include</span> google-font(&quot;Droid Sans&quot;)</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@import</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>&quot;http://fonts.googleapis.com/css?family=Droid Sans&quot;<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span>
</code></pre></div></div></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新: </span> <span class="time">11/5/2019, 4:49:11 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/sass-cn/api/AtRules/" class="prev router-link-active">
          综述
        </a></span> <span class="next"><a href="/sass-cn/api/AtRules/MixinAndinclude.html">
          @mixin、@include
        </a>
        →
      </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/sass-cn/assets/js/app.deb571aa.js" defer></script><script src="/sass-cn/assets/js/layout-layout.f021cffe.js" defer></script><script src="/sass-cn/assets/js/vendors~layout-layout.096dd481.js" defer></script><script src="/sass-cn/assets/js/page-api-atrules-import.1caa72ed.js" defer></script><script src="/sass-cn/assets/js/87.34d80629.js" defer></script><script src="/sass-cn/assets/js/93.6bc9799b.js" defer></script>
</body>

</html>